<template>
	<div class="my">
    <div class="news">
      <p>影视<span>头条</span></p>
      <swiper class="my-slider" v-if="newList.length>0" ref="mySwiper" cname="cname-my" :options="options" :not-next-tick="options.notNextTick">
        <swiper-slide  v-for="(item, key) in newList" :key="key">
          <router-link :to="item.href">{{item.title}}</router-link>
        </swiper-slide>
      </swiper>
      <i class="icon-arrow-right"></i>
    </div>
		<panel cname="my-panel" :title="panelTitle">
			<ul>
				<li><img src="/img/my/qiandao.jpg" alt=""><h5>金币</h5></li>
				<li><img src="/img/my/qiandao.jpg" alt=""><h5>积分</h5></li>
			</ul>
		</panel>
		<panel cname="hot-sale" :title="hotlTitle">
			<img src="/img/my/2.jpg" alt="">
		</panel>
		<hot-product :list="list"></hot-product>
	</div>
</template>

<script>
	let that
	import Panel from "../core/panel.vue"
	import HotProduct from "../core/hot-product.vue"
	export default {
		data(){
			return {
				list:[],
        newList:[],
				panelTitle:"每日签到",
				hotlTitle:"热卖品",
        options: {
          pagination: {
            el: '.swiper-pagination'
          },
          direction:'vertical',
          autoplay: true,
          loop: true,
          notNextTick:false,
          allowTouchMove:false
        }
			}
		},
		components:{
			HotProduct,
			Panel
		},
		methods:{
			getData(){
				this.$http.get("/api/my.json").then((req)=>{					
					that.list = req.data.hotProductList
          that.newList = req.data.new
				})
			}	,
       aaa(){
         console.log(this.newList)
       }
		},
		mounted(){
			that = this
			this.getData()
		}
	}
</script>

<style lang="scss">
@import "css/main.scss";
	.my{
		margin-bottom: 160px;
    >.news{
      display: flex;
      margin: 20px 30px;
      background-color: #fff;
      align-items: center;
      p{
        font-weight:bold;
        width: 60%;
        font-size: 30px;
        margin-bottom:0;
        span{
          font-size: 36px;
          color:red;
        }
      }
      .my-slider{
        padding-right: 80px;
        height:60px;
        line-height:60px;
        margin: 0 20px;
        a{
          width: 100%;
          display: inline-block;
          @include ellipsis;
        }
      }
      i{
        color: #c3c3c3;
      }
    }
    .my-panel{
			ul{
				display: flex;
        margin: 0 20px;
				li{
					position: relative;
          border:1px solid #c3c3c3;
          display: flex;
          align-items: center;
          width: 100%;
          &:last-child{
            margin-left: 20px;
          }
					img{
						width: 100%;
					}
					h5{
						position: absolute;
						right:20px;
						font-size: 24px;
						color: #fff;
						text-align: center;
						background-color: rgba(0,0,0,0.6);
						width: 60px;
						height:60px;
						line-height: 60px;
						border-radius:30px;
					}
				}
				
			}
		}
		.hot-sale{
			img{
				width: 100%;
			}
		}
	}
</style>
